<template>
	<el-dialog v-model="model" title="修改性別" width="450px">
		<el-form label-position="top">
			<el-form-item label="請選擇性別">
				<el-radio-group v-model="gender">
					<el-radio :value="1">男</el-radio>
					<el-radio :value="2">女</el-radio>
					<el-radio :value="3">保密</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="handleCancel">取消</el-button>
			<el-button :loading="submitting" type="primary" @click="handleSave">保存</el-button>
		</template>
	</el-dialog>
</template>
<script setup>
import { userStore } from '~/composables/store/modules/user';

const model = defineModel({ type: Boolean });
const store = userStore();
const gender = ref(null);
const submitting = ref(false);

function handleCancel() {
	model.value = false;
}

async function handleSave() {
	submitting.value = true;
	try {
		const body = {
			sex: gender.value,
		};
		await store.updateUserInfoAction(body);
		model.value = false;
	} finally {
		submitting.value = false;
	}
}

watch(
	() => model.value,
	now => {
		if (now) {
			gender.value = Number(store.profile.sex);
		}
	}
);
</script>
